<template>
  <div class="voucher-table bg-white-color">
    <table class="header" cellspacing="0" cellpadding="0">
      <tbody>
        <tr class="bg-white-color">
          <td style="width: 208px; font-weight: bold;">摘要</td>
          <td style="width: 308px; font-weight: bold;">会计科目</td>
          <td>
            <div style="font-weight: bold;">借方金额</div>
            <div class="moneyUint">
              <span>亿</span> <span>千</span> <span>百</span> <span>十</span> <span>万</span> <span>千</span>
              <span>百</span> <span>十</span> <span>元</span> <span>角</span> <span class="last">分</span>
            </div>
          </td>
          <td class="tdLast">
            <div style="font-weight: bold;">贷方金额</div>
            <div class="moneyUint">
              <span>亿</span> <span>千</span> <span>百</span> <span>十</span> <span>万</span> <span>千</span>
              <span>百</span> <span>十</span> <span>元</span> <span>角</span> <span class="last">分</span>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <table class="body" cellspacing="0" cellpadding="0">
      <tbody>
        <tr class="trDetails" v-for="(d, i) in details" :key="i" :data-idx="i">
          <td class="tdZhaoyao tdInput">
            <div class="display" v-if="!d.zyEdit" @click="doEdit(d, 'zy', i)">{{ d.data.summary }}</div>
            <DropdownCustom v-show="d.zyEdit" ref="zyDropdown" trigger="manual" :toggle-icon="false" style="width: 100%" equalWidth @hide="endEdit(d, 'zy', i)">
              <textarea class="h-input edit" data-type="zy" :data-index="i" :id="'zy' + i" @input="zyInput"></textarea>
              <template #content>
                <div style="height: 180px; overflow-y: scroll;">
                  <ul class="summary" :id="`summary${i}`">
                    <li class="summary-item" :data-index="idx" :class="{ 'summary-item-select': idx === 0 && zyFiler }" v-for="(s, idx) in summaryData" @click="chooseSummary(d, s.name, i)">
                      {{ s.name }}
                    </li>
                  </ul>
                </div>
              </template>
            </DropdownCustom>
          </td>
          <!-- Other table cells go here -->
        </tr>
        <tr class="trDetails total">
          <td colspan="2" class="spTotal padding-left">合计: {{ jfTotal | dxMoney }}</td>
          <td style="width: 220px;">
            <div class="display displayMoney">
              <span class="spTotalDebit">{{ jfTotal | formatMoney }}</span>
            </div>
          </td>
          <td class="tdLast" style="width: 220px;">
            <div class="display displayMoney">
              <span class="spTotalCredit">{{ dfTotal | formatMoney }}</span>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <i class="action fa fa-times-circle" @click="removeItem()"></i>
    <i class="action fa fa-plus-circle" @click="addItem()"></i>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted, watch } from 'vue';
import jQuery from 'jquery';
import Decimal from 'decimal.js';
import Pinyin from 'chinese-to-pinyin';
import DropdownCustom from '@/components/DropdownCustom'; // Ensure this component is correctly imported

export default {
  name: 'VoucherTable',
  props: {
    value: Object,
  },
  setup(props, { emit }) {
    const details = ref([
      { zyEdit: false, kmEdit: false, jfEdit: false, dfEdit: false, auxiliary: false, data: { summary: '' } },
      { zyEdit: false, kmEdit: false, jfEdit: false, dfEdit: false, auxiliary: false, data: { summary: '' } },
      { zyEdit: false, kmEdit: false, jfEdit: false, dfEdit: false, auxiliary: false, data: { summary: '' } },
      { zyEdit: false, kmEdit: false, jfEdit: false, dfEdit: false, auxiliary: false, data: { summary: '' } },
    ]);

    const hoverIdx = ref(-1);
    const voucherSelect = ref([]);
    const summarySelect = ref([]);
    const auxiliaryAccounting = ref([]);
    const zyFiler = ref('');
    const kmFiler = ref('');
    const zaiYao = ref([]);
    const balanceList = ref({});
    const initBalanceList = ref({});
    const auxiliaryAccountingData = ref({});
    const currentEdit = ref(null);
    const jfTotal = ref(0);
    const dfTotal = ref(0);

    const subjectData = computed(() => {
      if (kmFiler.value) {
        return voucherSelect.value.filter(value => {
          return value.code.includes(kmFiler.value) || value.name.includes(kmFiler.value) || value.mnemonicCode.includes(kmFiler.value);
        });
      }
      return voucherSelect.value;
    });

    const summaryData = computed(() => {
      if (zyFiler.value) {
        return summarySelect.value.filter(value => {
          return value.name.includes(zyFiler.value) || value.mnemonicCode.includes(zyFiler.value);
        });
      }
      return summarySelect.value;
    });

    const voucherItems = computed(() => {
      return details.value.map(value => value.data).filter(value => {
        return value.subjectId || value.summary || value.debitAmount || value.creditAmount;
      }).map(value => {
        let keys = Object.keys(value).filter(key => !isNaN(Number(key))), auxiliary = [];
        if (keys.length) {
          keys.forEach(key => {
            auxiliary.push(value[key]);
          });
        }

        return {
          auxiliary,
          debitAmount: value.debitAmount,
          creditAmount: value.creditAmount,
          subjectId: value.subjectId,
          direction: value.direction,
          subjectName: value.subjectName || '',
          subjectCode: value.subjectCode || '',
          auxiliaryTitle: value.auxiliaryTitle || '',
          summary: value.summary ? value.summary.trim().replace(/\s+/g, '') : '',
          num: value.num,
          price: value.price,
        };
      });
    });

    const FormatNum = (num, digit = 2) => {
      return Decimal(num).toFixed(digit);
    };

    const ToPy = (name) => {
      let pyArr = [];
      name.split('').forEach(w => {
        w = w.trim();
        if (w) {
          if (/[\u4e00-\u9fa5]/.test(w)) {
            let py = Pinyin(w, { removeTone: true, keepRest: true }).trim();
            pyArr.push(py.substring(0, 1));
          } else {
            pyArr.push(w);
          }
        }
      });

      return pyArr.join('');
    };

    const kmInput = (e) => {
      kmFiler.value = e.target.value;
      details.value[currentEdit.value.idx].auxiliary = false;
    };

    const zyInput = (e) => {
      zyFiler.value = e.target.value;
      details.value[currentEdit.value.idx].data.summary = e.target.value;
    };

    const removeItem = () => {
      if (details.value.length > 4) {
        details.value.splice(hoverIdx.value, 1);
      } else {
        details.value[hoverIdx.value].data = {};
      }
    };

    const addItem = (idx) => {
      details.value.splice(idx ? idx : Math.max((hoverIdx.value), 0), 0, {
        zyEdit: false,
        kmEdit: false,
        jfEdit: false,
        dfEdit: false,
        auxiliary: false,
        data: { summary: '', subjectName: '' },
      });
      nextTick(() => {
        bindEnterTabKeydownEvt();
      });
    };

    const doEdit = (row, type, idx) => {
      if (currentEdit.value) {
        endEdit(currentEdit.value.row, currentEdit.value.type, currentEdit.value.idx);
      }
      nextTick(() => {
        row[type + 'Edit'] = true;
        currentEdit.value = { row, type, idx };

        nextTick(() => {
          let keMuTxt = jQuery(`textarea#${type}${idx}`);
          keMuTxt.focus().select();
          if (type === 'km') {
            keMuTxt.val(row.data.subjectName);
            if (row.data.subject && row.data.subject.auxiliaryAccounting) {
              details.value[idx].auxiliary = true;
            }
          }
          jQuery('.h-input', `#${type}${idx}`).focus().select();
          jQuery(`#${type}${idx}`).focus().select();
          refs[`${type}Dropdown`][idx].show();
        });
      });
    };

    const endEdit = (row, type, idx, doNext = false) => {
      if (row[type + 'Edit']) {
        row[type + 'Edit'] = false;
        kmFiler.value = '';
        let debitAmount = Number(row.data.debitAmount);
        let creditAmount = Number(row.data.creditAmount);
        switch (type) {
          case 'jf':
            if (!isNaN(debitAmount) && !isNaN(creditAmount) && debitAmount) {
              row.data.creditAmount = '';
            }
            calculateBalance(row.data.subjectId);
            break;
          case 'df':
            if (!isNaN(debitAmount) && !isNaN(creditAmount) && creditAmount) {
              row.data.debitAmount = '';
            }
            break;
        }

        calculateBalance(row.data.subjectId);

        //如果有单位则需要计算单价
        if (row.data.unit && row.data.num > 0) {
          let money = debitAmount || creditAmount;
          details.value[idx].data.price = Number((money / row.data.num).toFixed(2));
        }

        let dropdown = refs[`${type}Dropdown`][idx];
        dropdown && dropdown.hide();
        //关闭辅助项输入
        details.value[idx].auxiliary = false;

        if (doNext) {
          if (type === 'jf' && row.data.debitAmount) {
            lastNext(idx);
          } else if (type !== 'df') {
            doEdit(row, nextTag[type], idx);
          } else {
            lastNext(idx);
          }
        }
      }
    };

    const lastNext = (idx) => {
      let row = details.value[idx + 1];
      if (!row) {
        addItem(idx + 1);
      }
      doEdit(details.value[idx + 1], 'zy', idx + 1);
    };

    const calculateBalance = (subjectId) => {
      if (subjectId) {
        let balance = initBalanceList.value[subjectId] || 0;
        let items = voucherItems.value.filter(val => val.subjectId === subjectId);
        items.forEach(val => {
          if (val.direction === '借') {
            if (val.debitAmount) {
              balance += Number(val.debitAmount);
            } else if (val.creditAmount) {
              balance -= Number(val.creditAmount);
            }
          } else {
            if (val.debitAmount) {
              balance -= Number(val.debitAmount);
            } else if (val.creditAmount) {
              balance += Number(val.creditAmount);
            }
          }
        });
        balanceList.value[subjectId] = FormatNum(balance);
      }
    };

    const loadVoucherSelect = () => {
      let tmp = localStorage.getItem('voucherSelect');
      let tmp2 = localStorage.getItem('summarySelect');
      if (tmp) {
        voucherSelect.value = JSON.parse(tmp);
      }
      if (tmp2) {
        summarySelect.value = JSON.parse(tmp2);
      }

      // Assuming $api is available globally or imported
      $api.setting.subject.voucherSelect().then(({ data }) => {
        voucherSelect.value = data;
        localStorage.setItem('voucherSelect', JSON.stringify(data));
      });

      $api.voucher.summary().then(({ data }) => {
        let newData = data.map(val => {
          return {
            name: val,
            mnemonicCode: ToPy(val),
          };
        });
        summarySelect.value = newData;
        localStorage.setItem('summarySelect', JSON.stringify(newData));
      });
    };

    const chooseSummary = (d, summary, idx) => {
      d.data.summary = summary;
      jQuery(`textarea#zy${idx}`).val(currentEdit.value.row.data.summary);
      refs.zyDropdown[idx].hide();
    };

    const chooseSubject = (d, subject, idx) => {
      if (d.data.subjectId !== subject.id) {
        d.data = {
          subjectName: subject.code + '-' + subject.name,
          subjectId: subject.id,
          subjectCode: subject.code,
          unit: subject.unit,
          direction: subject.balanceDirection,
          summary: d.data.summary,
          creditAmount: d.data.creditAmount,
          debitAmount: d.data.debitAmount,
          subject: subject,
        };
        loadSubjectBalance(d.data, subject.id);
      }
      //判断是否有辅助项目
      if (subject.auxiliaryAccounting) {
        auxiliaryAccounting.value[idx] = JSON.parse(subject.auxiliaryAccounting);
        loadAuxiliaryAccountingData(idx, subject);
        //开启辅助项输入
        nextTick(() => {
          details.value[idx].auxiliary = true;
          currentEdit.value.auxiliary = true;
        });
        jQuery(`textarea#km${idx}`).val(currentEdit.value.row.data.subjectName);
      } else {
        endEdit(d, 'km', idx, true);
      }
    };

    const loadSubjectBalance = (d, subjectId) => {
      if (!balanceList.value[subjectId]) {
        $api.setting.subject.balance({ subjectId: subjectId }).then(({ data }) => {
          balanceList.value[subjectId] = data;
          initBalanceList.value[subjectId] = data;
          d.balance = data;
        });
      } else {
        d.balance = balanceList.value[subjectId];
      }
    };

    const clear = () => {
      details.value = initDetails();
    };

    const loadAuxiliaryAccountingData = (idx, subject) => {
      if (!auxiliaryAccountingData.value[subject.id]) {
        $api.setting.accountingCategoryDetails.loadAuxiliaryAccountingData(auxiliaryAccounting.value[idx]).then(({ data }) => {
          auxiliaryAccountingData.value[subject.id] = data;
        });
      }
    };

    const fillAuxiliary = (row, auxiliaryData, idx) => {
      let title = '',
        rowData = row.data;
      Object.keys(auxiliaryData).forEach(val => {
        if (rowData[val]) {
          title += '_' + rowData[val].code + '_' + rowData[val].name;
        }
      });
      endEdit(row, 'km', idx, true);
      nextTick(() => {
        rowData.auxiliaryTitle = title;
      });
    };

    const showInput = (e) => {
      let target = jQuery(e.target);
      target.hide();
      target.next().show().focus().select();
    };

    const hideInput = (e, row) => {
      let target = jQuery(e.target);
      target.hide();
      target.prev().show();
      let inputs = target.closest('.num').find('.numInput');
      switch (row.direction) {
        case '借':
          row.debitAmount = FormatNum(Number(inputs[0].value) * Number(inputs[1].value));
          row.creditAmount = '';
          break;
        case '贷':
          row.creditAmount = FormatNum(Number(inputs[0].value) * Number(inputs[1].value));
          row.debitAmount = '';
          break;
      }
    };

    const initValue = (voucherItems) => {
      details.value = [
        { zyEdit: false, kmEdit: false, jfEdit: false, dfEdit: false, auxiliary: false, data: { summary: '' } },
        { zyEdit: false, kmEdit: false, jfEdit: false, dfEdit: false, auxiliary: false, data: { summary: '' } },
        { zyEdit: false, kmEdit: false, jfEdit: false, dfEdit: false, auxiliary: false, data: { summary: '' } },
        { zyEdit: false, kmEdit: false, jfEdit: false, dfEdit: false, auxiliary: false, data: { summary: '' } },
      ];
      voucherItems.forEach((item, idx) => {
        item.subjectName = item.subjectName;
        item.auxiliaryTitle = item.auxiliaryTitle;

        if (item.subject) {
          item.direction = item.subject.balanceDirection;
          item.unit = item.subject.unit;
          if (item.subject.auxiliaryAccounting) {
            auxiliaryAccounting.value[idx] = JSON.parse(item.subject.auxiliaryAccounting);
            loadAuxiliaryAccountingData(idx, item.subject);
          }
        }

        if (item.auxiliary) {
          item.auxiliary.forEach(a => {
            item[a.accountingCategoryId] = a.accountingCategoryDetails;
          });
          delete item.auxiliary;
        }
        details.value[idx] = Object.assign({}, detail, { data: item });
      });
    };

    const bindEnterTabKeydownEvt = () => {
      jQuery('.trDetails').off('keyup', '.edit');
      jQuery('.trDetails').off('keydown', '.edit');
      jQuery('.trDetails').off('blur', '.jf,.df');

      jQuery('.trDetails').on('blur', '.jf,.df', (e) => {
        let { type, index } = jQuery(e.target).closest('.edit').data();
        endEdit(details.value[index], type, index, false);
      });

      jQuery('.trDetails').on('keyup', '.edit', function (e) {
        let { type, index } = jQuery(e.target).closest('.edit').data();
        //贷方等于号输入处理
        if ((e.keyCode === 187 || e.code === 'Equal' || e.code === 'NumpadEqual' || e.key === '=') && (type === 'jf' || type === 'df')) {
          e.preventDefault();
          let detailsArr = Array.from(details.value);
          let totalCredit = 0,
            totalDebit = 0;
          detailsArr.forEach((value, i) => {
            if (index !== i) {
              let creditAmount = Number(value.data.creditAmount),
                debitAmount = Number(value.data.debitAmount);
              if (!isNaN(creditAmount)) {
                totalCredit += creditAmount;
              }
              if (!isNaN(debitAmount)) {
                totalDebit += debitAmount;
              }
            }
          });

          if (type === 'jf' && totalCredit !== 0) {
            detailsArr[index].data.debitAmount = FormatNum(totalCredit - totalDebit);
            detailsArr[index].data.creditAmount = 0;
            e.target.value = detailsArr[index].data.debitAmount.toFixed(2);
          } else if (type === 'df' && totalDebit !== 0) {
            detailsArr[index].data.creditAmount = FormatNum(totalDebit - totalCredit);
            detailsArr[index].data.debitAmount = 0;
            e.target.value = detailsArr[index].data.creditAmount.toFixed(2);
          }

          details.value = detailsArr;
          return false;
        }
      });

      jQuery('.trDetails').on('keydown', '.edit', function (e) {
        let { type, index } = jQuery(e.target).closest('.edit').data();
        if (e.keyCode === 13 || e.keyCode === 9) {
          e.preventDefault();
          if (type === 'km') {
            jQuery('li.subjects-item-select', `#subjects${index}`).click();
            return;
          }
          if (type === 'zy') {
            let select = jQuery(`.summary-item-select`, `#summary${index}`);
            if (select.length) {
              details.value[index].data.summary = select.text();
            }
          }
          endEdit(details.value[index], type, index, true);
          return false;
        }

        if (e.keyCode === 38 || e.keyCode === 40) {
          e.preventDefault();
          if (type === 'km' || type === 'zy') {
            let idPre = type === 'km' ? 'subjects' : 'summary';
            let subjects = jQuery(`#${idPre}${index}`);
            let select = jQuery(`.${idPre}-item-select`, subjects);

            if (!select.length) {
              subjects.children().first().addClass(`${idPre}-item-select`);
              return false;
            }

            let next = select.prev('li');
            if (e.keyCode === 40) {
              next = select.next('li');
            }

            if (next.length) {
              next.addClass(`${idPre}-item-select`);
              select.removeClass(`${idPre}-item-select`);
              let i = next.data('index');
              if (i > 7) {
                let top = subjects.parent().scrollTop();
                subjects.parent().scrollTop(top + 22);
              }
            }
          }
          return false;
        }
      });
    };

    const calculationOfTotal = () => {
      let jfTotalVal = 0,
        dfTotalVal = 0;
      details.value.forEach(value => {
        let debit, credit;
        if ((debit = Number(value.data.debitAmount))) {
          jfTotalVal += debit;
        }
        if ((credit = Number(value.data.creditAmount))) {
          dfTotalVal += credit;
        }
      });

      jfTotal.value = FormatNum(jfTotalVal);
      dfTotal.value = FormatNum(dfTotalVal);
    };

    watch(details, () => {
      calculationOfTotal();
      emit('input', {
        voucherItems: voucherItems.value,
        jfTotal: jfTotal.value || null,
        dfTotal: dfTotal.value || null,
      });
    }, { deep: true });

    onMounted(() => {
      nextTick(() => {
        jQuery('table.body').on('mouseover', 'tr.trDetails:not(.total)', function () {
          hoverIdx.value = jQuery(this).data('idx');
          let offset = jQuery(this).offset();
          let offsetParent = jQuery(this).offsetParent().offset();

          jQuery('i.fa-plus-circle').css({
            left: offset.left - offsetParent.left - 14,
            top: offset.top - offsetParent.top + 25,
            display: 'inline-block',
          }).show();
          jQuery('i.fa-times-circle').css({
            left: offset.left - offsetParent.left + 960,
            top: offset.top - offsetParent.top + 25,
            display: 'inline-block',
          }).show();
        }).on('mouseleave', 'tr.trDetails', function () {
          jQuery("i.action[class!='show']").hide();
        });

        jQuery('i.action').hover(function () {
          jQuery(this).addClass('show').css({ display: 'inline-block' });
        }, function () {
          jQuery(this).removeClass('show').hide();
        });

        jQuery('#app').click((e) => {
          if (!jQuery(e.target).hasClass('display')
            && !jQuery(e.target).hasClass('subjects-item')
            && !jQuery(e.target).closest('.auxiliary').length
            && !jQuery(e.target).closest('.tdInput').length
            && !jQuery(e.target).closest('.h-dropdown').length
            && currentEdit.value) {
            endEdit(currentEdit.value.row, currentEdit.value.type, currentEdit.value.idx);
          }
        });

        bindEnterTabKeydownEvt();
      });

      loadVoucherSelect();
    });

    return {
      details,
      hoverIdx,
      voucherSelect,
      summarySelect,
      auxiliaryAccounting,
      zyFiler,
      kmFiler,
      zaiYao,
      balanceList,
      initBalanceList,
      auxiliaryAccountingData,
      currentEdit,
      jfTotal,
      dfTotal,
      subjectData,
      summaryData,
      voucherItems,
      kmInput,
      zyInput,
      removeItem,
      addItem,
      doEdit,
      endEdit,
      lastNext,
      calculateBalance,
      loadVoucherSelect,
      chooseSummary,
      chooseSubject,
      loadSubjectBalance,
      clear,
      loadAuxiliaryAccountingData,
      fillAuxiliary,
      showInput,
      hideInput,
      initValue,
      bindEnterTabKeydownEvt,
      calculationOfTotal,
    };
  },
};
</script>

<style lang="less">
.voucher-table {
  position: relative;
  font-size: 12px;
  width: 1000px;
  padding: 10px 20px;

  .tdLast {
    border-right: 1px solid #dadada;
  }

  .header {
    width: 960px;
    text-align: center;
    line-height: 30px;
  }

  table tbody tr td {
    border-left: 1px solid #dadada;
    border-top: 1px solid #dadada;
    border-bottom: 1px solid #dadada;
    padding: 0;
    border-spacing: 0;
  }

  .moneyUint {
    border-top: 1px solid #dadada;
    height: 30px;
    background-image: url(../assets/moneyUint.png);
    width: 221px;

    span {
      float: left;
      display: inline;
      width: 19px;
      height: 100%;
      margin-right: 1px;
      background-color: #fff;
      text-align: center;
      font-size: 12px;
    }

    .last {
      margin-right: 0;
    }
  }

  .body {
    width: 960px;
    text-align: center;

    .numInput {
      outline: none;
    }

    td {
      vertical-align: top;
    }

    .trDetails {
      width: 959px;

      .spTotal {
        width: 250px;
        text-align: left;
        vertical-align: middle;
        font-weight: bold;
      }

      .h-icon-error {
        right: 55px;
        top: 20px;
      }

      .display {
        height: 60px;
        font-weight: bold;
        font-size: 13px;
        text-align: left;
        padding: 2px;
        line-height: 17px;
      }

      .tdZhaoyao {
        width: 207px;
      }

      .tdKemu {
        width: 307px;
        position: relative;

        .yue {
          position: absolute;
          bottom: 2px;
          left: 2px;
          z-index: 2;
          font-weight: bold;
        }

        .num {
          position: absolute;
          bottom: 17px;
          right: 5px;
          line-height: 23px;
          font-weight: normal;
          z-index: 2;
        }
      }

      .tdJieFang,
      .tdDaiFang {
        width: 221px;
      }

      .displayMoney {
        font-weight: bold;
        font-size: 14px;
        letter-spacing: 11px;
        overflow: hidden;
        text-align: right;
        font-family: 'tahoma', serif;
        background-image: url(../assets/moneyUint.png);
        line-height: 60px;
        padding: 0;

        span {
          position: relative;
          right: -5px;
        }
      }

      .h-autocomplete-show {
        border: none;
        border-radius: 0;
      }

      .h-input {
        border: none;
        border-radius: 0;
        height: 60px !important;
        resize: none !important;
        width: 100% !important;
      }

      textarea.h-input {
        height: 60px !important;
      }

      .h-dropdowncustom-show-content {
        width: 100% !important;
      }
    }

    tbody:first-child td {
      border-top: 0 !important;
    }
  }

  .action {
    position: absolute;
    font-size: 16px;
    cursor: pointer;
    display: none;

    &:hover {
      color: @primary-color;
    }
  }

  .h-numberinput-show {
    border-radius: 0;

    &.focusing {
      border: 1px solid #44b449;
      box-shadow: none;
    }

    .h-input {
      font-size: 16px;
      font-weight: bold;
    }
  }
}

.subjects,
.summary {
  li {
    padding: 2px 10px;
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;

    &:hover {
      background: @primary-color;
      color: @white-color;
    }
  }

  &-item-select {
    background: @primary-color;
    color: @white-color;
  }
}

.hoverNum {
  text-align: right;
  padding: 0 10px;
  font-size: 26px;
  font-weight: bold;
  height: 60px;
  line-height: 60px;
}
</style>